<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    // jsx是什么？javascript的一个语法扩展。React.createElement创建的一个虚拟DOM对象。
    // 1- 虚拟DOM对象的本质也是一个对象
    // 2- 虚拟DOM对象是通过函数React.createElement创建的
    // 3- jsx的本质即是React.createElement
    // 4- 虚拟DOM对象最终会转为真实的DOM对象，并在浏览器当中进行渲染。

    // 执行过程
    // 1- 指定React的根容器
    // 2- 通过render指定虚拟dom
    //    虚拟DOM一般使用的JSX生成。
    //    babel会将JSX通过React.createElement生成虚拟DOM元素（对象，该对象会被缓存。）
    //    会将虚拟DOM元素转为真实的DOM元素然后进行渲染。
    //
    //    如果模板当中的数据状态发生更改，那么会重新生成虚拟DOM元素，并将该虚拟DOM元素与之前缓存的虚拟DOM元素进行比较。
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    let a = 1;
    root.render((
        <div>
            <h3>今天天气不错{a}</h3>
            <p>什么是幸福？幸福就是我没有认真听讲，结果发现认真听讲的同学也没有听懂，这就是幸福！</p>
        </div>
    ));
</script>
</html>